<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <meta name="author" content="Dan Motzenbecker" />
    <meta
      name="description"
      content="Serverless WebRTC matchmaking for painless P2P"
    />
    <link href="images/favicon.png" rel="icon" type="image/png" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Mono:ital@0;1&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="site.css" />
    <title>Trystero - serverless WebRTC matchmaking</title>
  </head>
  <body>
    <div id="canvas"></div>
    <header>
      <h1>🤝 Trystero<sup>0.22.0</sup></h1>
      <h2>Make any site multiplayer in a few lines.</h2>
      <h2>Serverless WebRTC matchmaking for painless P2P.</h2>

      <div>
        <div>
          <a href="https://github.com/dmotz/trystero">repo + docs</a>
        </div>
        <div id="room-num"></div>
      </div>
    </header>

    <main>
      <p>
        Below is some code describing whatʼs happening on this site right now.
      </p>

      <p>
        Anyone on this page will connect directly to others in real-time,
        syncing mouse movement and clicks. (Try it, I dare you).
      </p>

      <p>
        Trystero can connect peers via
        <span
          >🌊
          <a href="https://en.wikipedia.org/wiki/BitTorrent">BitTorrent</a
          >,</span
        >
        <span>🐦 <a href="https://en.wikipedia.org/wiki/Nostr">Nostr</a>,</span>
        <span>📡 <a href="https://en.wikipedia.org/wiki/MQTT">MQTT</a>,</span>
        <span
          >🪐
          <a href="https://en.wikipedia.org/wiki/InterPlanetary_File_System"
            >IPFS</a
          >,</span
        >
        <span
          ><span style="font-family: sans-serif">⚡️</span>
          <a href="https://supabase.com">Supabase</a>,</span
        >
        and <span>🔥 <a href="https://firebase.google.com">Firebase</a></span
        >.
      </p>

      <p id="peer-info">
        Right now youʼre the only person with the page open, but you can cheat
        and just open this URL in another tab to see what itʼs like with others.
      </p>

      <hr />

      <p>Hereʼs how you use it.</p>

      <p>Join a room with an app ID and a room ID:</p>

      <pre><code>import {joinRoom} from 'trystero'
const room = joinRoom({appId: 'trystero-lounge'}, '101')
</code></pre>

      <p>
        Listen for peers joining and leaving (leaving out some boring UI code):
      </p>

      <pre><code>room.onPeerJoin(addCursor)
room.onPeerLeave(removeCursor)
</code></pre>

      <p>Make some actions to send and respond to:</p>

      <pre><code>const [sendMove, getMove] = room.makeAction('mouseMove')
const [sendClick, getClick] = room.makeAction('click')
</code></pre>

      <p>Broadcast your actions to other peers:</p>

      <pre><code>window.addEventListener('mousemove', e => sendMove([e.clientX, e.clientY]))
window.addEventListener('click', () => sendClick(randomFruit())
</code></pre>

      <p>And listen for when peers send theirs:</p>

      <pre><code>getMove(([x, y], peerId) => setCursorPosition(peerId, x, y))
getClick((fruit, peerId) => dropFruitFrom(peerId, fruit))
</code></pre>

      <p>
        Thatʼs all this page is doing, but you can do much more like audio/video
        streams and binary data (like files).
        <a href="https://github.com/dmotz/trystero#readme"
          >Peruse the readme to see how.</a
        >
      </p>

      <hr />

      <p>
        -o-&lt;&lt;| <a href="https://oxism.com">Dan Motzenbecker</a> |
        <a href="https://github.com/dmotz">github/dmotz</a>
      </p>
    </main>
    <script src="site.js" type="module"></script>
  </body>
</html>
